<template>
  <view>
    <!-- 存储相关按钮（已注释） -->
    <!-- <button class="primary" @click="setStorage">存储数据</button>
    <button class="primary" @click="getStorage">获取数据</button>
    <button class="primary" @click="removeId">移除id</button> -->
    
    <!-- 下拉刷新按钮 -->
    <button @click="pullDown">下拉刷新</button>
    
    <!-- 列表内容 -->
    <view>这是列表页</view>
    <view class="box-item" v-for="item in list" :key="item">
      {{ item }}
    </view>
    <button type="primary" @click="chooseImg">上传图片</button>
<!--    <image v-for="item in imgArr" :src="item"></image> -->
	<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
	
	<!-- H5平台特有内容 -->
    <!-- #ifdef H5 -->
    <view>我希望只在h5页面中看见</view>
    <!-- #endif -->
    
    <!-- 微信小程序特有内容 -->
    <!-- #ifdef MP-WEIXIN -->
    <view>我希望只在微信小程序页面中看见</view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['前端', 'JAVA', 'UI', '测试', '大数据'],
      imgArr: []
    }
  },
  // onPullDownRefresh() {
  //   console.log('触发了下拉刷新')
  //   setTimeout(() => {
  //     this.list = ['JAVA', 'UI', '前端', '测试', '大数据']
  //     uni.stopPullDownRefresh()
  //   }, 2000)
  // },
  // onReachBottom(){
	 //  console.log('页面触底了')
	 //  this.list = [...this.list,...['JAVA','UI','前端','测试','大数据']]
  // },
  // onLoad(options) {
  //   console.log('页面加载了', options);
  // },
  // onShow() {
  //   console.log('页面显示了');
  // },
  // onReady() {
  //   console.log('页面初次渲染完成了');
  // },
  // onHide() {
  //   console.log('页面隐藏了');
  // },
  // onLoad(){
  //   //#ifdef H5
  //   console.log('我希望h5中打印')
  //   // #endif 
  //   // #ifdef MP-WEIXIN
  //   console.log('我希望微信小程序中打印')
  //   // #endif
   
  methods: {
    // 存储相关方法（已注释，如需使用可解除注释）
    // setStorage(){
    //   uni.setStorage({
    //     key:'id',
    //     data:80,
    //     success(){
    //       console.log('存储成功')
    //     }
    //   })
    //   uni.setStorage('id',100)
    // },
    // getStorage(){
    //   uni.getStorage({
    //     key:'id',
    //     success(res){
    //       console.log('获取成功',res.data)
    //     }
    //   })
    //   const res = uni.getStorageSync('id')
    //   console.log(res)
    // },
    // removeId(){
    //   uni.removeStorage({
    //     key:'id',
    //     success(){
    //       console.log('删除成功')
    //     }
    //   })
    //   uni.removeStorageSync('id')
    // },
    
    // 下拉刷新方法
    pullDown() {
      console.log('开启下拉刷新')
      uni.startPullDownRefresh()
      // 建议添加刷新完成后的停止逻辑 
    },
	previewImg(current){
		uni.previewImage({
			current,
			urls:this.imgArr,
			loop:true,
			indicator:'default'	
		})
	},
	chooseImg(){
		uni.chooseImage({
			count:5,
			success:res=>{
				this.imgArr = res.tempFilePaths
			}
		})
		
	}
  }
};
</script>

<style>
.box-item {
  padding: 15rpx;
  border-bottom: 1px solid #eee;
}
</style>
